<template>
  <div class="home-index-page">
    <div class="top-static">
      <el-row>
        <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
          <StaticCard
            desc="新增用户"
            :value="pageData.staticObj.newUser"
            icon="iconfont icon-peoples"
            color="#40c9c6"
          ></StaticCard>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
          <StaticCard
            desc="未读消息"
            :value="pageData.staticObj.noReadMsg"
            icon="iconfont icon-wechat-fill"
            color="#36a3f7"
          ></StaticCard>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
          <StaticCard
            desc="成交金额"
            :value="pageData.staticObj.cost"
            icon="iconfont icon-money"
            color="#f4516c"
          ></StaticCard>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="12" :xs="24">
          <StaticCard
            desc="购物总量"
            :value="pageData.staticObj.buyNumber"
            icon="iconfont icon-shopping-cart-fill"
            color="#40c9c6"
          ></StaticCard>
        </el-col>
      </el-row>
    </div>
    <div class="visitor-static">
      <el-row>
        <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
          <el-card shadow="hover" class="echarts-card">
            <v-chart ref="pieEchartsRef" class="chart" :option="pieOption" />
          </el-card>
        </el-col>
        <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
          <el-card shadow="hover" class="echarts-card">
            <v-chart ref="barEchartsRef" class="chart" :option="barOption" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { onActivated, onDeactivated, reactive, ref } from "vue";
import StaticCard from "./components/StaticCard.vue";
import api from "../../api";
import { pieEcharts, barEcharts } from "./components/echartsConfig";

const pieOption = ref(null);
const barOption = ref(null);
onActivated(() => {
  pieOption.value = pieEcharts();
  barOption.value = barEcharts();
});

onActivated(() => {
  api.home
    .getVisitorNumber()
    .then((res) => {
      if (res?.data) {
        pageData.staticObj = res.data;
      } else {
        pageData.staticObj = {};
      }
    })
    .catch((err) => {
      console.log(err);
    });
});

let pageData = reactive({
  staticObj: {
    buyNumber: 0,
    cost: 0,
    newUser: 0,
    noReadMsg: 0,
  },
});

const pieEchartsRef = ref(null);
const barEchartsRef = ref(null);
const resizeEcharts = () => {
  pieEchartsRef.value.resize();
  barEchartsRef.value.resize();
};
onActivated(() => {
  window.addEventListener("resize", resizeEcharts);
});

onDeactivated(() => {
  window.removeEventListener("resize", resizeEcharts);
});
</script>
<style lang="scss" scoped>
.home-index-page {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  .top-static,
  .visitor-static {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 20px;
    margin-top: -10px;
    .el-row {
      .el-col {
        padding: 10px;
      }
    }
  }
  .visitor-static {
    margin-top: -20px;
    .echarts-card {
      height: 340px;
      :deep(.el-card__body) {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
